<template>
  <div class="cmsLogin">
    <div>
      <div class="loginTop">
        <div class="loginWidt">
          <p class="p1"><img src="@/assets/img/logo_dl.png" class="icon-formcell"></p>
        </div>
      </div>
      <div>
        <!--   <el-carousel indicator-position="outside">
            <el-carousel-item v-for="item in imgs" :key="item.url">
                <img src="@/assets/img/login_back.png" class="icon-formcell">
            </el-carousel-item>
        </el-carousel>-->

        <div class="login_left">
          <img src="@/assets/img/login_font.png" class="icon-formcell">
        </div>
        <div class="loginbox">
          <div class="title">
            <p class="data">密码登录</p>
            <p>短信登陆</p>
          </div>
          <div class="qieh">
            <img slot="suffix" src="~@/assets/img/ewm.png" alt="">
          </div>
          <div class="login-error-msg">
            <transition name="el-zoom-in-center">
              <el-alert v-if="errorMsg" type="error" :title="errorMsg" @close="errorMsg = ''" />
            </transition>
          </div>
          <el-form ref="form" :model="form" :rules="rules" @keyup.enter.native="login">
            <el-form-item prop="username">
              <el-input v-model="form.username">
                <img slot="suffix" src="~@/assets/img/user.png" alt="">
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input v-model="form.password" type="password">
                <img slot="suffix" src="~@/assets/img/paswod.png" alt="">
              </el-input>
            </el-form-item>
          </el-form>
          <!-- <el-form-item prop="yzm" class="yzm">
              <el-input v-model="form.yzm" type="yzm"></el-input>
              <div class="yzm_img"></div>
          </el-form-item>-->
          <p class="add_word"><el-checkbox>下次自动登陆</el-checkbox><a>忘记密码？</a></p>

          <div class="login-submit">
            <el-button :loading="loading" @click="login">登录</el-button>
          </div>
          <div class="login-wx">
            <p class="p1">————————<span>or</span>————————</p>
            <div class="img">
              <img slot="suffix" src="~@/assets/img/weix.png" alt="">
              <img slot="suffix" src="~@/assets/img/weib.png" alt="">
            </div>
          </div>
        </div>
      </div>
      <div class="loginBotom">
        <p class="p1">Copyright © 2015 - 2100 成都唐源电气股份有限公司 All rights reserved.Best view by IE11 1600*900</p>
      </div>
    </div>
  </div>
</template>

<script>
import { getToken as login } from '@/api/main'
import { setToken } from '@/utils/auth'
import store from '@/store'
import CryptoJS from 'crypto-js'
export default {
  name: 'Login',
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      rules: {
        username: { required: true, message: '请输入账号', trigger: 'blur' },
        password: { required: true, message: '请输入密码', trigger: 'blur' }
      },
      errorMsg: '',
      loading: false,
      redirect: '',
      imgs: [
        { url: '@/assets/img/login-back.png' },
        { url: '@/assets/img/login-back.png' }
      ]
    }
  },
  watch: {
    form: {
      handler() {
        this.errorMsg = ''
      },
      deep: true
    }
  },
  created() {
    this.redirect = this.$route.query && this.$route.query.redirect
  },
  beforeDestroy() {
    this.loading = false
  },
  methods: {
    login() {
      const form = new FormData()
      form.append('username', this.encrypt(this.form.username))
      form.append('password', this.encrypt(this.form.password))
      form.append('grant_type', 'password')
      form.append('client_id', this.encrypt('EIS'))
      form.append('client_secret', this.encrypt('cdtye2019'))
      this.$refs.form.validate(valid => {
        if (valid) {
          this.errorMsg = ''
          this.loading = true
          login(form).then(response => {
            const data = response
            if (data.access_token) {
              setToken(data.access_token)
              store.dispatch('app/setUserInfo', data.user_name)
              this.$router.replace({ path: this.redirect || '/' })
            } else {
              this.errorMsg = data.message
              this.loading = false
            }
          }).catch(error => {
            const errorRes = error
            // this.notifiySuccess(error.response)
            // console.log(error.response)
            this.errorMsg = errorRes.message || '服务器错误'
            this.loading = false
          })
        }
      })
    },
    encrypt(value) {
      // 如果是32位在java后端解密会报错 AES获取Cipher异常：Illegal key size 16位就不会
      // const key = CryptoJS.enc.Utf8.parse('61DC779D88F539478E45C55452AF9DBB')
      const key = CryptoJS.enc.Utf8.parse('61DC779D88F53947')
      const iv = CryptoJS.enc.Utf8.parse('1b76d0c6af4bcb56')
      const encrypted = CryptoJS.AES.encrypt(value, key, {
        iv: iv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.Pkcs7
      }).toString()
      return encrypted
    }
  }
}
</script>

<style lang="scss">
.el-carousel__item img {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
}
.cmsLogin {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    background: url(~@/assets/img/login_back.png);
    background-size: 100% 100%;
    .loginWidt {
        margin-left: 30px
    }
    .add_word{
      margin-top:-10px;
      margin-bottom:20px;
      color:#ddd;
      a{
        float: right;
      }
    }
    .login_left{
        position: absolute;
        top: 50%;
        left: 5%;
        margin-top: -85px;
    }
    .loginLeftcent {
        position: absolute;
        top: 50%;
        width: 65%;
        margin-top: -224px;
    }

  .loginLeft {
    position: relative;
    width: 703px;
    height: 400px;
    margin: auto;

    background-size: 100% 100%;

    .jiaz {
      position: absolute;
      top: 51px;
      left: 136px;
      width: 327px;
      height: 327px;
      margin: auto;

      @keyframes rotate1 {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
      }

      @keyframes rotate2 {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
      }

      >img {
        position: absolute;
        top: 0;
        width: 100%;
      }

      .img1 {
        width: 100%;
        height: 100%;
        animation: rotate1 17s linear infinite;
      }

      .img2 {
        top: 50%;
        left: 50%;
        width: 87%;
        height: 87%;
        margin-top: -43.5%;
        margin-left: -43.5%;
        animation: rotate2 7s linear infinite;
      }

      .img3 {
        top: 50%;
        left: 50%;
        width: 70%;
        height: 70%;
        margin-top: -35%;
        margin-left: -35%;
      }
    }
  }

  .loginTop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 20px 0;
    color: #fff;
    .p1 {
      font-size: 24px;
      line-height: 30px;
    }

    .p2 {
      font-size: 12px;
      line-height: 20px;
    }
  }

  .loginbox {
    position: absolute;
    top: 50%;
    right: 6%;
    width: 440px;
    padding: 20px;
    margin-top: -278px;
    background: rgba(16, 16, 16, 0.4);
    .title {
        width: 100%;
        margin: 14px auto 30px;
        font-size: 18px;
        color: #fff;
        text-align: center;
        display: flex;
        border-bottom:1px solid #515b66;
        .data{
            border-bottom:#a9a9a9 1px solid;
        }
        p{
            cursor:pointer;
            margin-right:20px;
            padding-bottom:20px;
        }
    }
    .qieh{
        position:absolute;
        top:10px;
        right:10px;
        cursor:pointer;
        img{
            width:60px
        }
    }
    .formcell {
      position: relative;
      width: 300px;
      height: 48px;
      margin: 0 auto 40px;
    }

    .input {
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      width: 300px;
      height: 48px;
      padding: 0 40px 0 20px;
      font-size: 14px;
      line-height: 48px;
      color: #2ec3d3;
      background: rgba(37, 93, 164, 0.5);
      border: 2px solid #1d4f90;
      border-radius: 5px;
      outline: none;
    }

    .icon-formcell {
      position: absolute;
      top: 13px;
      right: 15px;
      z-index: 9999;
    }

    .btn {
      left: 0;
      width: 300px;
      height: 42px;
      font-size: 18px;
      color: #fff;
      letter-spacing: 5px;
      cursor: pointer;
      background-color: rgb(5, 128, 201);
      border: none;
      border-radius: 4px;
      outline: none;
    }
  }
  .login-wx{
    .p1{
      text-align: center;
      color: #fff;
      margin: 20px 0;
      span{
        margin:0 20px
      }
    }
    .img{
      display:flex;
      justify-content:center;
      img{
        margin:0 20px 20px;
      }
    }
  }
  .loginBotom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    font-size: 14px;
    line-height: 40px;
    color: #000;
    text-align: center;
  }

  .el-form {
    margin: 0 auto;
    .el-input {
        background: #fff;
        border: 2px solid #1d4f90;
        border-radius: 0;
        .el-input__inner {
            height: 60px;
            font-size: 14px;
            line-height: 48px;
            color: #2ec3d3;
            padding-left: 63px;
            outline: none;
        }
        .el-input__suffix {
            left: 0;
            right: 0;
            background: #b0b1b1;
            width: 55px;
            img {
                padding-top: 15px;
                width: 26px;
            }
        }
    }
    .yzm{
        .el-form-item__content{
           display:flex;
           >div{
               width:49%
           }
           .yzm_img{
                margin-left:2%;
                background:#a9b6cd;
                height: 62px;
           }
        }
        .el-input__inner{
            padding-left:5px
        }
    }
  }

  .login-error-msg {
    width: 390px;
    height: auto;
    margin: 0 auto 20px;

    .el-alert--error {
      background-color: rgba(48, 129, 132, 0.5);

      .el-alert__closebtn {
        top: 8px;
        font-size: 18px;

        &:hover {
          color: rgba(48, 129, 132, 1);
        }
      }
    }
  }

  .login-submit {
    // width: 300px;
    margin: 0 auto;

    .el-button {
        width:100%;
        font-size: 18px;
        color: #fff;
        background: #3970fd;
        border: none;
        outline: none;
        height: 50px;
        span {
            letter-spacing: 10px;
        }
    }

    .el-button:hover,
    .el-button:focus {
      background: #3464de;
    }
  }
}
</style>
